<!DOCTYPE html>
<html lang="zh-CN">





<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/apple-touch-icon.png">
  <link rel="icon" type="image/png" href="/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="xu wen liu">
  <meta name="keywords" content="">
  <title>Vue 常用集锦 - NeverGiveUpT</title>

  <link  rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.12.1/css/all.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/mdbootstrap/4.13.0/css/mdb.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/github-markdown-css/3.0.1/github-markdown.min.css" />

<link rel="stylesheet" href="//at.alicdn.com/t/font_1067060_qzomjdt8bmp.css">



  <link  rel="stylesheet" href="/lib/prettify/tomorrow-night-eighties.min.css" />

<link  rel="stylesheet" href="/css/main.css" />


  <link defer rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />


<!-- 自定义样式保持在最底部 -->

  
<link rel="stylesheet" href="/css/custom.css">



<meta name="generator" content="Hexo 4.2.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>NeverGiveUpT</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/">首页</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/archives/">归档</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/categories/">分类</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/tags/">标签</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/about/">关于</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/links/">友链</a>
          </li>
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="view intro-2" id="background" parallax=true
         style="background: url('/img/post.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask rgba-black-light flex-center">
          <div class="container text-center white-text fadeInUp">
            <span class="h2" id="subtitle">
              
            </span>

            
              
                <p class="mt-3 post-meta">
                  <i class="fas fa-calendar-alt" aria-hidden="true"></i>
                  2020-03-11 17:06:00
                </p>
              

              <p class="mt-1">
                
                  
                  <span class="post-meta">
                    <i class="far fa-chart-bar"></i>
                    7.8k 字
                  </span>
                

                
                  
                  <span class="post-meta">
                      <i class="far fa-clock"></i>
                      43 分钟
                  </span>
                

                
              </p>
            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid">
  <div class="row">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-md">
      <div class="container nopadding-md" id="board-ctn">
        <div class="py-5 z-depth-3" id="board">
          <div class="post-content mx-auto" id="post">
            
              <p
                class="note note-warning">本文最后更新于：2020-05-18 22:16:51</p>
            
            <div class="markdown-body">
              <h3 id="1-v-text-v-html-中如何使用过滤器"><a href="#1-v-text-v-html-中如何使用过滤器" class="headerlink" title="1.v-text/v-html 中如何使用过滤器"></a>1.v-text/v-html 中如何使用过滤器</h3><p>Vue2.x 不再支持在 <code>v-html</code> 中使用过滤器Vue2.x 的过滤器现在只能应用在“Mustache”语法 (双大括号) 的文本插值 和 <code>v-bind</code> 中。<br>如果要使用采用如下方式：</p>
<p><code>v-html=&quot;$options.filters.过滤器名称(需要过滤的内容,[过滤器需要的参数])&quot;</code></p>
<h3 id="2-在Vue组件中动态生成的DOM类名样式不作用-deep"><a href="#2-在Vue组件中动态生成的DOM类名样式不作用-deep" class="headerlink" title="2.在Vue组件中动态生成的DOM类名样式不作用-/deep/"></a>2.在Vue组件中动态生成的DOM类名样式不作用-/deep/</h3><pre><code class="html">&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;div v-text=&quot;text&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
    export default {
        name:&quot;app&quot;,
        data(){
            return {
                text:&lt;span class=&quot;red&quot;&gt;红色&lt;/span&gt;
            } 
        }
    }
&lt;/script&gt;

&lt;style scoped lang=&quot;less&quot;&gt;
    /deep/ .red{
        color:red;
    }
&lt;/style&gt;
</code></pre>
<p>注意：/deep/ 只是在最外层使用，不要嵌套使用。<br>参考文档：<a href="https://vue-loader.vuejs.org/guide/scoped-css.html" target="_blank" rel="noopener">deep</a></p>
<h3 id="3-使用a标签打电话"><a href="#3-使用a标签打电话" class="headerlink" title="3.使用a标签打电话"></a>3.使用a标签打电话</h3><pre><code class="html">&lt;a :href=&quot;&#39;tel:&#39;+ phone&quot;&gt;打电话&lt;/a&gt;</code></pre>
<h3 id="4-注册自定义指令"><a href="#4-注册自定义指令" class="headerlink" title="4.注册自定义指令"></a>4.注册自定义指令</h3><ul>
<li><p>全局注册</p>
<pre><code class="html">  &lt;div id=&quot;app&quot;&gt;
      &lt;p&gt;页面载入时，input 元素自动获取焦点：&lt;/p&gt;
      &lt;input v-focus&gt;
  &lt;/div&gt;

  &lt;script&gt;
  // 注册一个全局自定义指令 v-focus
  Vue.directive(&#39;focus&#39;, {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
      // 聚焦元素
      el.focus()
  }
  })
  // 创建根实例
  new Vue({
  el: &#39;#app&#39;
  })
  &lt;/script&gt;</code></pre>
</li>
<li><p>局部注册</p>
<pre><code class="html">  &lt;div id=&quot;app&quot;&gt;
  &lt;p&gt;页面载入时，input 元素自动获取焦点：&lt;/p&gt;
  &lt;input v-focus&gt;
  &lt;/div&gt;

  &lt;script&gt;
  // 创建根实例
  new Vue({
  el: &#39;#app&#39;,
  directives: {
      // 注册一个局部的自定义指令 v-focus
      focus: {
      // 指令的定义
      inserted: function (el) {
          // 聚焦元素
          el.focus()
      }
      }
  }
  })
  &lt;/script&gt;</code></pre>
</li>
</ul>
<h3 id="5-Prop-验证"><a href="#5-Prop-验证" class="headerlink" title="5.Prop 验证"></a>5.Prop 验证</h3><p>我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。</p>
<p>为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的<code>对象</code>，而不是一个<code>字符串数组</code>。例如：</p>
<pre><code class="js">Vue.component(&#39;my-component&#39;, {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: &#39;hello&#39; }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return [&#39;success&#39;, &#39;warning&#39;, &#39;danger&#39;].indexOf(value) !== -1
      }
    }
  }
})</code></pre>
<h3 id="6-子组件传数据到父组件"><a href="#6-子组件传数据到父组件" class="headerlink" title="6.子组件传数据到父组件"></a>6.子组件传数据到父组件</h3><p><img src="/img/vue/%E6%95%B0%E6%8D%AE%E4%BC%A0%E9%80%92.png" srcset="/img/loading.gif" alt="子组件传数据到父组件"></p>
<h3 id="7-生命周期"><a href="#7-生命周期" class="headerlink" title="7.生命周期"></a>7.生命周期</h3><p><img src="/img/vue/lifecycle.png" srcset="/img/loading.gif" alt="vue2.x生命周期"></p>
<h3 id="8-生成二维码"><a href="#8-生成二维码" class="headerlink" title="8.生成二维码"></a>8.生成二维码</h3><p><a href="https://github.com/theomessin/vue-qriously#readme" target="_blank" rel="noopener">vue-qriously</a><br><a href="https://segmentfault.com/a/1190000014875645" target="_blank" rel="noopener">生成二维码并下载</a></p>
<ul>
<li><p>如何安装并导入</p>
<pre><code class="js">  // ES6
  import Vue from &#39;vue&#39;
  import VueQriously from &#39;vue-qriously&#39;
  Vue.use(VueQriously)

  // ES5
  var Vue = require(&#39;vue&#39;)
  Vue.use(require(&#39;vue-qriously&#39;).default)
</code></pre>
</li>
<li><p>如何使用</p>
<pre><code class="html">  &lt;qriously value=&quot;Hello World!&quot; :size=&quot;200&quot; /&gt;</code></pre>
<p>参数：</p>
</li>
<li><p>background: string 二维码背景  默认：’white’</p>
</li>
<li><p>backgroundAlpha:number 二维码背景透明度 默认： 1.0</p>
</li>
<li><p>foreground:string 二维码前景色 默认：’black’</p>
</li>
<li><p>foregroundAlpha:number 二维码前景色透明度 默认：1.0</p>
</li>
<li><p>level:string 二维码误差校验等级(L,M,Q,H) 默认：’L’</p>
</li>
<li><p>mime:string 二维码图片的mine type</p>
</li>
<li><p>padding:number 二维码padding值(像素) 默认null(auto)</p>
</li>
<li><p>size:number 二维码大小(像素) 默认：100</p>
</li>
<li><p>value:string 二维码内容</p>
</li>
</ul>
<h3 id="9-60s短信验证码倒计时"><a href="#9-60s短信验证码倒计时" class="headerlink" title="9.60s短信验证码倒计时"></a>9.60s短信验证码倒计时</h3><p>countDown.vue</p>
<pre><code class="html">&lt;template&gt;
     &lt;div class=&quot;getInfobtn&quot;&gt;
        &lt;button&gt;{{time | change}}&lt;/button&gt;
     &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
let flag = false
    export default {
        data () {
            return {
                time : &#39;获取验证码&#39;,
            }
        },
        props : {
            start : {
                type : Boolean
            }
        },
        watch : {
            start (value,oldvalue) {
                if(value == true){
                    this.countDown();
                }
            }
        },
        created() {
            if(this.start==true){
                this.countDown();
            }
        },//加上这个可以实现点击另一个按钮触发这个组件的点击事件，对应的是：自动触发倒计时，就是默认就显示60s后重新获取
        methods: {
            countDown () {
                this.time = 60;
                let time = setInterval(()=&gt;{
                    this.time --;
                    if(this.time == 0){
                        this.$emit(&#39;countDown&#39;);
                        this.time = &#39;重新发送&#39;;
                        flag = true;
                        clearInterval(time);
                    }
                },1000)
            }
        },
        filters : {
            change (value) {
               if(!value) return &quot;&quot;;
               if(!isNaN(value)){
                   if(flag == true){
                       return `${value}s后重新获取`;
                   }
                   return value+&#39;s后重新获取&#39;;
               }else{
                   return value;
               }
            }
        }

    }
&lt;/script&gt;
&lt;style scoped&gt;
.getInfobtn button{
    background-color: green;
    color:#fff;
    padding: 0.1rem;
    border-radius: 0.05rem;
    width: 3rem;
}
&lt;/style&gt;</code></pre>
<p>使用：</p>
<pre><code class="html">&lt;template&gt;
    &lt;div class=&quot;getSubsidy&quot;&gt;
        //给组件绑定事件就加上.native
        &lt;countDown :start=&#39;start&#39; @countDown =&#39;start=false&#39; @click.native=&#39;sendCode&#39;&gt;&lt;/countDown&gt;
           &lt;button @click=&quot;shout&quot;&gt;点我触发上面的倒计时&lt;/button&gt;
    &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
    import countDown from &quot;./countDown&quot;
    export default{
        components:{
            countDown
        },
        data(){
            return {
                start : false
            }
        },
        methods:{
            sendCode (value) {
                //前面发送ajax请求成功之后调用this.start = true开始短信倒计时
                this.start = true
            },
            shout() {
                  this.start = true;
            },//配合组件里面的created钩子函数自动倒计时。

        }
    }
&lt;/script&gt;</code></pre>
<h3 id="10-在vue里面使用RSA加密"><a href="#10-在vue里面使用RSA加密" class="headerlink" title="10.在vue里面使用RSA加密"></a>10.在vue里面使用RSA加密</h3><p>1.将jsencrypt.min.js复制到static文件夹下面<br>2.在index.html里面引入</p>
<pre><code class="js">&lt;script type=text/javascript src=&quot;./static/jsencrypt.min.js&quot;&gt;&lt;/script&gt;</code></pre>
<p>3.定义加密函数</p>
<pre><code class="js">&lt;script&gt;
    var Rsa = function(key) {
        var encrypt = new JSEncrypt(),
        publicKey = &quot;MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCBG3UFPAxh+a0NLv6Plvjo5YPDdnlbED8dI4GP21DdFKvXVFcPb0lSRrht5Xrg7ck4PJ/fovfSi7k8MYqPY52g9tnPzkAthVOs99Tw6DVe22vV2hcs7dXvtk+TxKy4IqMjZA77hiH8wMYcJur+o4R770mrVP4fP88x53EQ4PaayQIDAQAB&quot;;
        encrypt.setPublicKey(publicKey);
        return encrypt.encrypt(key);
    }
&lt;/script&gt;</code></pre>
<p>上面定义可以在methods里面定义<br>4.使用</p>
<pre><code class="js">conosle.log(Rsa(123));</code></pre>
<h3 id="11-货币过滤器"><a href="#11-货币过滤器" class="headerlink" title="11.货币过滤器"></a>11.货币过滤器</h3><pre><code class="js">Vue.filter(&#39;currency&#39;, function (value, _currency, decimals) {
  var digitsRE = /(\d{3})(?=\d)/g;
  value = parseFloat(value);
  if (!isFinite(value) || !value &amp;&amp; value !== 0) return &#39;&#39;;
  _currency = _currency != null ? _currency : &#39;$&#39;;
  decimals = decimals != null ? decimals : 2;
  var stringified = Math.abs(value).toFixed(decimals);
  var _int = decimals ? stringified.slice(0, -1 - decimals) : stringified;
  var i = _int.length % 3;
  var head = i &gt; 0 ? _int.slice(0, i) + (_int.length &gt; 3 ? &#39;,&#39; : &#39;&#39;) : &#39;&#39;;
  var _float = decimals ? stringified.slice(-1 - decimals) : &#39;&#39;;
  var sign = value &lt; 0 ? &#39;-&#39; : &#39;&#39;;
  return sign + _currency + head + _int.slice(i).replace(digitsRE, &#39;$1,&#39;) + _float;
});</code></pre>
<h3 id="12-时间过滤器"><a href="#12-时间过滤器" class="headerlink" title="12.时间过滤器"></a>12.时间过滤器</h3><pre><code class="js">export const filterDate = (date, fmt = &#39;YYYY-MM-DD HH:mm&#39;) =&gt; {
    if (!date) {
        return &#39;&#39;;
    }
    if (typeof date === &#39;number&#39;) {
        date = new Date(date * 1000);
    }
    var o = {
      &#39;M+&#39;: date.getMonth() + 1,
      &#39;D+&#39;: date.getDate(),
      &#39;h+&#39;: date.getHours() % 12 === 0 ? 12 : date.getHours() % 12,
      &#39;H+&#39;: date.getHours(),
      &#39;m+&#39;: date.getMinutes(),
      &#39;s+&#39;: date.getSeconds(),
      &#39;q+&#39;: Math.floor((date.getMonth() + 3) / 3),
      &#39;S&#39;: date.getMilliseconds()
    }
    var week = {
      &#39;0&#39;: &#39;\u65e5&#39;,
      &#39;1&#39;: &#39;\u4e00&#39;,
      &#39;2&#39;: &#39;\u4e8c&#39;,
      &#39;3&#39;: &#39;\u4e09&#39;,
      &#39;4&#39;: &#39;\u56db&#39;,
      &#39;5&#39;: &#39;\u4e94&#39;,
      &#39;6&#39;: &#39;\u516d&#39;
    }
    if (/(Y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + &#39;&#39;).substr(4 - RegExp.$1.length))
    }
    if (/(E+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length &gt; 1) ? (RegExp.$1.length &gt; 2 ? &#39;\u661f\u671f&#39; : &#39;\u5468&#39;) : &#39;&#39;) + week[date.getDay() + &#39;&#39;])
    }
    for (var k in o) {
      if (new RegExp(&#39;(&#39; + k + &#39;)&#39;).test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : ((&#39;00&#39; + o[k]).substr((&#39;&#39; + o[k]).length)))
      }
    }
    return fmt
}</code></pre>
<h3 id="13-过滤电话号码182-1234"><a href="#13-过滤电话号码182-1234" class="headerlink" title="13.过滤电话号码182****1234"></a>13.过滤电话号码182****1234</h3><pre><code class="js">Vue.filter(&#39;telfilter&#39;, function (value) {
  var data = value.split(&quot;&quot;);
  data.splice(3, 4, &quot;*&quot;, &quot;*&quot;, &quot;*&quot;, &quot;*&quot;);
  return data.join(&quot;&quot;);
})</code></pre>
<h3 id="14-vue-router-商品列表页进入商品详情页，返回商品列表回滚到之前走的位置"><a href="#14-vue-router-商品列表页进入商品详情页，返回商品列表回滚到之前走的位置" class="headerlink" title="14.vue-router 商品列表页进入商品详情页，返回商品列表回滚到之前走的位置"></a>14.vue-router 商品列表页进入商品详情页，返回商品列表回滚到之前走的位置</h3><p>条件：<br>1.必须是body在滚动<br>2.商品详情页路由需要缓存<br>3.设置路由离开保存滚动高度，回到列表是设置之前保存的滚动高度。</p>
<pre><code class="js">data:{
        return {
            scroll:0,//保存滚动高度
        }
    }，
beforeRouteLeave(to,from,next) {
        //离开的时候保存body的滚动高度
        this.scroll=document.body.scrollTop;
        next();
    },
beforeRouteEnter(to,from,next){
    //详情页回到列表页的时候设置body的滚动高度
    next(vm =&gt; {
        if(from.name==&quot;getSubsidy&quot;){//商品详情页的路由name
            document.body.scrollTop=vm.scroll;
        }
    })
},</code></pre>
<h3 id="15-vue里面获取滚动高度，并实现吸顶效果"><a href="#15-vue里面获取滚动高度，并实现吸顶效果" class="headerlink" title="15.vue里面获取滚动高度，并实现吸顶效果"></a>15.vue里面获取滚动高度，并实现吸顶效果</h3><p>1.布局</p>
<pre><code class="html">&lt;div class=&quot;xiding-outbox&quot; ref=&quot;xid&quot;&gt;
    &lt;div class=&quot;xiding-innerbox&quot; :class=&quot;{&#39;xiding&#39;:isFixed}&quot;&gt;
        &lt;div class=&quot;help&quot; @click=&quot;callHandleService(customerServicePhone)&quot;&gt;
            &lt;p class=&quot;F3 C0&quot;&gt;
                &lt;img src=&quot;../../../assets/img/material/customer_service_ic.png&quot;&gt;
                    如需帮助，点击咨询人工服务
                &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;search&quot;&gt;
            &lt;div class=&quot;search-box&quot;&gt;
                &lt;div class=&quot;search-input&quot;&gt;
                    &lt;input class=&quot;F4 C1&quot; type=&quot;text&quot; maxlength=&quot;30&quot;
                                placeholder=&quot;输入品牌名称搜索&quot; v-model.trim=&quot;queryKey&quot;&gt;
                &lt;/div&gt;
                &lt;a class=&quot;search-btn F4 C0&quot; @click=&quot;search&quot;&gt;搜索&lt;/a&gt;
            &lt;/div&gt;
            &lt;button class=&quot;F4 C0 find&quot; @click=&quot;isFade=!isFade&quot;&gt;查找我要的品类
            &lt;p&gt;&lt;/p&gt;
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
<p>2.样式</p>
<pre><code class="css">.xiding-outbox{
    height: 3.68rem;//吸顶外面固定吸顶内容的高度
    .xiding-innerbox{
        .help{
            width: 100%;
            height: 1.78667rem;
            line-height: 1.78667rem;
            background-color: #282828;
            p{
                display: inline-block;
                position: absolute;
                left: 50%;
                margin-left: -3.04rem;
                img{
                    position: relative;
                    top: 0.2rem;
                    margin-right: 0.21333rem;
                }
            }
        }
        .search{
            background-color: #fff;
            padding: 0.50667rem 0.29333rem;
            border-bottom: 1px solid #e6e6e6;
            display: flex;
            justify-content:space-between;
            .search-box{
                    display: flex;
                .search-input{
                    border:1px solid #282828;
                    border-right: none;
                    width:3.4rem;
                    height: 0.8rem;
                    border-radius: 0.08rem 0 0 0.08rem;
                    overflow: hidden;
                    input{
                        display: block;
                        box-sizing: border-box;
                        width: 100%;
                        height: 0.8rem;
                        padding-left: 0.21333rem;
                        border-radius: 0.08rem 0 0 0.08rem;
                    }
                }
                .search-btn{
                    border-radius: 0 0.08rem 0.08rem 0;
                    border:1px solid #282828;
                    height: 0.8rem;
                    line-height: 0.8rem;
                    width: 1.2rem;
                    text-align: center;
                    background-color: #282828;
                }
                .search-btn:active {  
                    opacity: 0.5; 
                } 
            }

            .find{
                background-color: #ed316b;
                height: 0.85rem;
                width: 3.4rem;
                border-radius: 0.08rem;
                border:1px solid #ed316b;
                p{
                    display: inline-block;
                    width: 0.21333rem;
                    height: 0.21333rem;
                    border:1px solid ;
                    background: transparent;
                    border-color: #fff #fff transparent transparent;
                    transform:rotateZ(45deg);
                } 
            }
        }
    }
    .xiding{
        position: fixed;
        top: 1.2rem;
        left: 0;
        z-index: 99;
        width: 100%;
    }
}</code></pre>
<p>3.在methods里面定义touchMove方法</p>
<pre><code class="js">touchMove() {
    //获取滚动高度
    var bodyTop=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    //获取被吸顶元素的高度
    var xidH=this.$refs.xid.offsetTop;
    if(bodyTop&gt;=xidH) {
        this.isFixed=true;
    }else{
        this.isFixed=false;

    }
},</code></pre>
<p>4.在mounted钩子函数里面给window监听scroll事件</p>
<pre><code class="js">mounted() {
    this.$nextTick(() =&gt; {
        window.addEventListener(&#39;scroll&#39;,this.touchMove);
    })
},</code></pre>
<h3 id="16-图片懒加载"><a href="#16-图片懒加载" class="headerlink" title="16.图片懒加载"></a>16.图片懒加载</h3><pre><code class="js">import VueLazyload from &#39;vue-lazyload&#39;
Vue.use(VueLazyload, {
    error: require(&#39;./assets/img/game-icon/yxdt_icon_none.png&#39;),
    loading: require(&#39;./assets/img/loading.gif&#39;),
    attempt: 1
})</code></pre>
<p>使用：</p>
<pre><code class="html">&lt;ul&gt;
  &lt;li v-for=&quot;img in list&quot;&gt;
    &lt;img v-lazy=&quot;img.src&quot; &gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
<h3 id="17-vue里面弹框滑动阻止body滚动"><a href="#17-vue里面弹框滑动阻止body滚动" class="headerlink" title="17.vue里面弹框滑动阻止body滚动"></a>17.vue里面弹框滑动阻止body滚动</h3><p>1.main.js</p>
<pre><code class="js">//解决遮罩层滚动穿透问题，分别在遮罩层弹出后和关闭前调用
const ModalHelper = ( (bodyCls) =&gt;{
    let scrollTop;
    return {
        open: function () {
            scrollTop = document.scrollingElement.scrollTop;
            document.body.classList.add(bodyCls);
            document.body.style.top = -scrollTop + &#39;px&#39;;
        },
        close: function () {
            document.body.classList.remove(bodyCls);
            // scrollTop lost after set position:fixed, restore it back.
            document.scrollingElement.scrollTop = scrollTop;
        }
    };
})(&#39;dialog-open&#39;);
Vue.prototype.ModalHelper = ModalHelper</code></pre>
<p>2.body添加class <code>dialog-open</code></p>
<pre><code class="css">body.dialog-open {
    position: fixed;
    width: 100%;
}</code></pre>
<p>3.监控 是否显示弹框变量</p>
<pre><code class="js">watch:{
    isShow(newVal,oldVal){
        if(newVal){
            this.ModalHelper.open();
        }else {
            this.ModalHelper.close();
        }
    }
}</code></pre>
<h3 id="18-抠出mint-ui-Loadmore源码自定义"><a href="#18-抠出mint-ui-Loadmore源码自定义" class="headerlink" title="18.抠出mint-ui Loadmore源码自定义"></a>18.抠出mint-ui Loadmore源码自定义</h3><pre><code class="html">&lt;template&gt;
    &lt;div class=&quot;mint-loadmore&quot;&gt;
        &lt;div class=&quot;mint-loadmore-content&quot; :class=&quot;{ &#39;is-dropped&#39;: topDropped || bottomDropped}&quot; :style=&quot;{ &#39;transform&#39;: &#39;translate3d(0, &#39; + translate + &#39;px, 0)&#39; }&quot;&gt;
            &lt;slot name=&quot;top&quot;&gt;
                &lt;div class=&quot;mint-loadmore-top&quot; v-if=&quot;topMethod&quot;&gt;
                    &lt;mt-spinner v-if=&quot;topStatus === &#39;loading&#39;&quot; class=&quot;mint-loadmore-spinner&quot; :size=&quot;size&quot; type=&quot;fading-circle&quot;&gt;&lt;/mt-spinner&gt;
                    &lt;span class=&quot;mint-loadmore-text&quot;&gt;{{ topText }}&lt;/span&gt;
                &lt;/div&gt;
            &lt;/slot&gt;
            &lt;slot&gt;&lt;/slot&gt;
            &lt;slot name=&quot;bottom&quot;&gt;
                &lt;div class=&quot;mint-loadmore-bottom&quot;  v-if=&quot;bottomMethod&quot;&gt;
                    &lt;mt-spinner v-if=&quot;bottomStatus === &#39;loading&#39;&quot; class=&quot;mint-loadmore-spinner&quot; :size=&quot;size&quot; type=&quot;fading-circle&quot;&gt;&lt;/mt-spinner&gt;
                    &lt;span class=&quot;mint-loadmore-text&quot;&gt;{{ bottomText }}&lt;/span&gt;
                &lt;/div&gt;
            &lt;/slot&gt;

        &lt;/div&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
    export default {
        props: {
            stopTranslate: {
                type: Number,
                default: 80
            },
            maxDistance: {
                type: Number,
                default: 0
            },
            autoFill: {
                type: Boolean,
                default: false
            },
            distanceIndex: {
                type: Number,
                default: 2
            },
            topPullText: {
                type: String,
                default: &#39;下拉刷新&#39;
            },
            topDropText: {
                type: String,
                default: &#39;释放刷新&#39;
            },
            topLoadingText: {
                type: String,
                default: &#39;刷新中...&#39;
            },
            topDistance: {
                type: Number,
                default: 70
            },
            topMethod: {
                type: Function
            },
            bottomPullText: {
                type: String,
                default: &#39;上拉加载&#39;
            },
            bottomDropText: {
                type: String,
                default: &#39;释放加载&#39;
            },
            bottomLoadingText: {
                type: String,
                default: &#39;疯狂加载中...&#39;
            },
            bottomDistance: {
                type: Number,
                default: 70
            },
            bottomMethod: {
                type: Function
            },
            bottomAllLoaded: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                size: parseInt(this.HTML_FONT_SIZE * 0.4),
                translate: 0, // 此变量决定当前组件上下移动,
                scrollEventTarget: null, // 滚动的dom节点
                containerFilled: false, // 当前滚动的内容是否填充完整,不完成会调用 loadmore的回调函数
                topText: &quot;&quot;, // 下拉刷新,显示的文本
                topDropped: false, // 记录当前drop状态,用给组件dom添加is-dropped class(添加回到原点的动画)
                bottomText: &quot;&quot;, // 上拉加载更多 显示的文本
                bottomDropped: false, // 同topDropped
                bottomReached: false, // 当前滚动是否滚动到了底部
                direction: &quot;&quot;, // touch-move过程中, 当前滑动的方向
                startY: 0, // touch-start 起始的y的坐标值
                startScrollTop: 0, // touch-start 起始的滚动dom的 scrollTop
                currentY: 0, // touch-move 过程中的 y的坐标
                topStatus: &quot;&quot;, // 下拉刷新的状态: pull(下拉) drop(释放) loading(正在加载数据)
                bottomStatus: &quot;&quot; // 上拉加载更多的状态: 状态同上
            };
        },
        watch: {
            topStatus(val) {
                this.$emit(&quot;top-status-change&quot;, val);
                switch (val) {
                    case &quot;pull&quot;:
                        this.topText = this.topPullText;
                        break;
                    case &quot;drop&quot;:
                        this.topText = this.topDropText;
                        break;
                    case &quot;loading&quot;:
                        this.topText = this.topLoadingText;
                        break;
                }
            },

            bottomStatus(val) {
                this.$emit(&quot;bottom-status-change&quot;, val);
                switch (val) {
                    case &quot;pull&quot;:
                        this.bottomText = this.bottomPullText;
                        break;
                    case &quot;drop&quot;:
                        this.bottomText = this.bottomDropText;
                        break;
                    case &quot;loading&quot;:
                        this.bottomText = this.bottomLoadingText;
                        break;
                }
            }
        },
        mounted() {
            this.init(); // 当前 vue component挂载完成之后, 执行init()函数
        },
        methods: {
            onTopLoaded: function onTopLoaded() {
                var this$1 = this;

                this.translate = 0;
                setTimeout(function() {
                    this$1.topStatus = &#39;pull&#39;;
                }, 200);
            },
            onBottomLoaded: function onBottomLoaded() {
                var this$1 = this;

                this.bottomStatus = &#39;pull&#39;;
                this.bottomDropped = false;
                this.$nextTick(function() {
                    if (this$1.scrollEventTarget === window) {
                        document.body.scrollTop += this.stopTranslate;;
                    } else {
                        this$1.scrollEventTarget.scrollTop += this.stopTranslate;;
                    }
                    this$1.translate = 0;
                });
                if (!this.bottomAllLoaded &amp;&amp; !this.containerFilled) {
                    this.fillContainer();
                }
            },
            init() {
                this.topStatus = &#39;pull&#39;;
                this.bottomStatus = &#39;pull&#39;;
                this.topText = this.topPullText;
                this.scrollEventTarget = this.getScrollEventTarget(this.$el); // 获取滚动的dom节点
                if (typeof this.bottomMethod === &#39;function&#39;) {
                    this.fillContainer(); // 判断当前滚动内容是否填满,没有执行外部传入的loadmore回调函数加载数据
                    this.bindTouchEvents(); // 为当前组件dom注册touch事件
                }
                if (typeof this.topMethod === &#39;function&#39;) {
                    this.bindTouchEvents();
                }
            },
            getScrollEventTarget: function getScrollEventTarget(element) {
                var currentNode = element;
                while (currentNode &amp;&amp; currentNode.tagName !== &#39;HTML&#39; &amp;&amp;
                    currentNode.tagName !== &#39;BODY&#39; &amp;&amp; currentNode.nodeType === 1) {
                    var overflowY = document.defaultView.getComputedStyle(currentNode).overflowY;
                    if (overflowY === &#39;scroll&#39; || overflowY === &#39;auto&#39;) {
                        return currentNode;
                    }
                    currentNode = currentNode.parentNode;
                }
                return window;
            },
            getScrollTop: function getScrollTop(element) {
                if (element === window) {
                    return Math.max(window.pageYOffset || 0, document.documentElement.scrollTop);
                } else {
                    return element.scrollTop;
                }
            },
            bindTouchEvents: function bindTouchEvents() {
                this.$el.addEventListener(&#39;touchstart&#39;, this.handleTouchStart);
                this.$el.addEventListener(&#39;touchmove&#39;, this.handleTouchMove);
                this.$el.addEventListener(&#39;touchend&#39;, this.handleTouchEnd);
            },


            fillContainer() {
                if (this.autoFill) {
                    this.$nextTick(() =&gt; {
                        if (this.scrollEventTarget === window) {
                            this.containerFilled = this.$el.getBoundingClientRect().bottom &gt;=
                                document.documentElement.getBoundingClientRect().bottom;
                        } else {
                            this.containerFilled = this.$el.getBoundingClientRect().bottom &gt;=
                                this.scrollEventTarget.getBoundingClientRect().bottom;
                        }
                        if (!this.containerFilled) { // 如果没有填满内容, 执行loadmore的操作
                            this.bottomStatus = &#39;loading&#39;;
                            this.bottomMethod(); // 调用外部的loadmore函数,加载更多数据
                        }
                    });
                }
            },
            handleTouchStart(event) {
                this.startY = event.touches[0].clientY; // 手指按下的位置, 用于下面move事件计算手指移动的距离
                this.startScrollTop = this.getScrollTop(this.scrollEventTarget); // 起始scroll dom的 scrollTop(滚动的距离)
                //下面重置状态变量
                this.bottomReached = false;
                if (this.topStatus !== &#39;loading&#39;) {
                    this.topStatus = &#39;pull&#39;;
                    this.topDropped = false;
                }
                if (this.bottomStatus !== &#39;loading&#39;) {
                    this.bottomStatus = &#39;pull&#39;;
                    this.bottomDropped = false;
                }
            },
            handleTouchMove(event) {
                //确保当前touch节点的y的位置,在当前loadmore组件的内部
                if (this.startY &lt; this.$el.getBoundingClientRect().top &amp;&amp; this.startY &gt; this.$el.getBoundingClientRect().bottom) {
                    return;
                }
                this.currentY = event.touches[0].clientY;
                let distance = (this.currentY - this.startY) / this.distanceIndex;
                this.direction = distance &gt; 0 ? &#39;down&#39; : &#39;up&#39;;
                // 下拉刷新,条件(1.外部传入了刷新的回调函数 2.滑动方向是向下的 3.当前滚动节点的scrollTop为0 4.当前topStatus不是loading)
                if (typeof this.topMethod === &#39;function&#39; &amp;&amp; this.direction === &#39;down&#39; &amp;&amp;
                    this.getScrollTop(this.scrollEventTarget) === 0 &amp;&amp; this.topStatus !== &#39;loading&#39;) {
                    event.preventDefault();
                    event.stopPropagation();
                    //计算translate(将要平移的距离), 如果当前移动的距离大于设置的最大距离,那么此次这次移动就不起作用了
                    if (this.maxDistance &gt; 0) {
                        this.translate = distance &lt;= this.maxDistance ? distance - this.startScrollTop : this.translate;
                    } else {
                        this.translate = distance - this.startScrollTop;
                    }
                    if (this.translate &lt; 0) {
                        this.translate = 0;
                    }
                    this.topStatus = this.translate &gt;= this.topDistance ? &#39;drop&#39; : &#39;pull&#39;; // drop: 到达指定的阈值,可以执行刷新操作了
                }

                // 上拉操作, 判断当前scroll dom是否滚动到了底部
                if (this.direction === &#39;up&#39;) {
                    this.bottomReached = this.bottomReached || this.checkBottomReached();
                }
                if (typeof this.bottomMethod === &#39;function&#39; &amp;&amp; this.direction === &#39;up&#39; &amp;&amp;
                    this.bottomReached &amp;&amp; this.bottomStatus !== &#39;loading&#39; &amp;&amp; !this.bottomAllLoaded) {
                    event.preventDefault();
                    event.stopPropagation();
                    // 判断的逻辑思路同上
                    if (this.maxDistance &gt; 0) {
                        this.translate = Math.abs(distance) &lt;= this.maxDistance ?
                            this.getScrollTop(this.scrollEventTarget) - this.startScrollTop + distance : this.translate;
                    } else {
                        this.translate = this.getScrollTop(this.scrollEventTarget) - this.startScrollTop + distance;
                    }
                    if (this.translate &gt; 0) {
                        this.translate = 0;
                    }
                    this.bottomStatus = -this.translate &gt;= this.bottomDistance ? &#39;drop&#39; : &#39;pull&#39;;
                }
                this.$emit(&#39;translate-change&#39;, this.translate);
            },
            checkBottomReached() {
                if (this.scrollEventTarget === window) {
                    return document.body.scrollTop + document.documentElement.clientHeight &gt;= document.body.scrollHeight;
                } else {
                    return this.$el.getBoundingClientRect().bottom &lt;= this.scrollEventTarget.getBoundingClientRect().bottom + 1;
                }
            },
            handleTouchEnd() {
                if (this.direction === &#39;down&#39; &amp;&amp; this.getScrollTop(this.scrollEventTarget) === 0 &amp;&amp; this.translate &gt; 0) {
                    this.topDropped = true; // 为当前组件添加 is-dropped class(也就是添加动画处理)
                    if (this.topStatus === &#39;drop&#39;) { // 到达了loading的状态
                        this.translate = this.stopTranslate; // top slot的高度
                        this.topStatus = &#39;loading&#39;;
                        this.topMethod(); // 执行回调函数
                    } else { // 没有到达,回调原点
                        this.translate = &#39;0&#39;;
                        this.topStatus = &#39;pull&#39;;
                    }
                }
                // 处理逻辑同上
                if (this.direction === &#39;up&#39; &amp;&amp; this.bottomReached &amp;&amp; this.translate &lt; 0) {
                    this.bottomDropped = true;
                    this.bottomReached = false;
                    if (this.bottomStatus === &#39;drop&#39;) {
                        this.translate = -this.stopTranslate;
                        this.bottomStatus = &#39;loading&#39;;
                        this.bottomMethod();
                    } else {
                        this.translate = &#39;0&#39;;
                        this.bottomStatus = &#39;pull&#39;;
                    }
                }
                this.$emit(&#39;translate-change&#39;, this.translate);
                this.direction = &#39;&#39;;
            }
        }





    }
&lt;/script&gt;

&lt;style lang=&quot;less&quot; scoped&gt;
    @import url(&#39;../components/less/common.less&#39;);
    .mint-spinner-fading-circle {
        position: relative
    }

    .mint-spinner-fading-circle-circle {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute
    }

    .mint-spinner-fading-circle-circle::before {
        content: &quot; &quot;;
        display: block;
        margin: 0 auto;
        width: 15%;
        height: 15%;
        border-radius: 100%;
        -webkit-animation: mint-fading-circle 1.2s infinite ease-in-out both;
        animation: mint-fading-circle 1.2s infinite ease-in-out both
    }

    .mint-spinner-fading-circle-circle.is-circle2 {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg)
    }

    .mint-spinner-fading-circle-circle.is-circle2::before {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s
    }

    .mint-spinner-fading-circle-circle.is-circle3 {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg)
    }

    .mint-spinner-fading-circle-circle.is-circle3::before {
        -webkit-animation-delay: -1s;
        animation-delay: -1s
    }

    .mint-spinner-fading-circle-circle.is-circle4 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    .mint-spinner-fading-circle-circle.is-circle4::before {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s
    }

    .mint-spinner-fading-circle-circle.is-circle5 {
        -webkit-transform: rotate(120deg);
        transform: rotate(120deg)
    }

    .mint-spinner-fading-circle-circle.is-circle5::before {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s
    }

    .mint-spinner-fading-circle-circle.is-circle6 {
        -webkit-transform: rotate(150deg);
        transform: rotate(150deg)
    }

    .mint-spinner-fading-circle-circle.is-circle6::before {
        -webkit-animation-delay: -0.7s;
        animation-delay: -0.7s
    }

    .mint-spinner-fading-circle-circle.is-circle7 {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    .mint-spinner-fading-circle-circle.is-circle7::before {
        -webkit-animation-delay: -0.6s;
        animation-delay: -0.6s
    }

    .mint-spinner-fading-circle-circle.is-circle8 {
        -webkit-transform: rotate(210deg);
        transform: rotate(210deg)
    }

    .mint-spinner-fading-circle-circle.is-circle8::before {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s
    }

    .mint-spinner-fading-circle-circle.is-circle9 {
        -webkit-transform: rotate(240deg);
        transform: rotate(240deg)
    }

    .mint-spinner-fading-circle-circle.is-circle9::before {
        -webkit-animation-delay: -0.4s;
        animation-delay: -0.4s
    }

    .mint-spinner-fading-circle-circle.is-circle10 {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg)
    }

    .mint-spinner-fading-circle-circle.is-circle10::before {
        -webkit-animation-delay: -0.3s;
        animation-delay: -0.3s
    }

    .mint-spinner-fading-circle-circle.is-circle11 {
        -webkit-transform: rotate(300deg);
        transform: rotate(300deg)
    }

    .mint-spinner-fading-circle-circle.is-circle11::before {
        -webkit-animation-delay: -0.2s;
        animation-delay: -0.2s
    }

    .mint-spinner-fading-circle-circle.is-circle12 {
        -webkit-transform: rotate(330deg);
        transform: rotate(330deg)
    }

    .mint-spinner-fading-circle-circle.is-circle12::before {
        -webkit-animation-delay: -0.1s;
        animation-delay: -0.1s
    }

    @-webkit-keyframes mint-fading-circle {
        0%,
        39%,
        100% {
            opacity: 0
        }
        40% {
            opacity: 1
        }
    }

    @keyframes mint-fading-circle {
        0%,
        39%,
        100% {
            opacity: 0
        }
        40% {
            opacity: 1
        }
    }

    .mint-loadmore {
        overflow: hidden
    }

    .mint-loadmore-content {}

    .mint-loadmore-content.is-dropped {
        -webkit-transition: .2s;
        transition: .2s
    }

    .mint-loadmore-top,
    .mint-loadmore-bottom {
        text-align: center;
        height: 50px;
        line-height: 50px
    }

    .mint-loadmore-top {
        margin-top: -1.6rem /* 120/75 */;
        height: 1.6rem /* 120/75 */;
        line-height: 1.6rem /* 120/75 */;
        span {
            display: inline-block;
            vertical-align: middle;
            &amp;.is-rotate {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg)
            }
        }
        /deep/.mint-spinner-fading-circle{
            display: block;
        }
    }

    .mint-loadmore-bottom {
        margin-bottom: -1.6rem /* 120/75 */;
        height: 1.6rem /* 120/75 */;
        line-height: 1.6rem /* 120/75 */;
    }

    .mint-loadmore-spinner {
        display: inline-block;
        margin-right: 5px;
        vertical-align: middle
    }

    .mint-loadmore-text {
        vertical-align: middle;
        font-size: .32rem/* 24/75 */;
        color: @color-green;
    }
.mint-loadmore-bottom{
    margin-bottom: -1.6rem /* 120/75 */;
    height: 1.6rem /* 120/75 */;
    line-height: 1.6rem /* 120/75 */;
        span {
        display: inline-block;
        -webkit-transition: .2s linear;
        transition: .2s linear;
        vertical-align: middle;
        &amp;.is-rotate {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg)
        }
    }
    /deep/.mint-spinner-fading-circle{
        display: block;
    }
}
&lt;/style&gt;</code></pre>
<p>使用：</p>
<pre><code class="html">&lt;template&gt;
    &lt;div&gt;
        &lt;Header rooter=&quot;-1&quot; title=&quot;自助返水&quot; :hasNoBack=&quot;true&quot; iFontsize=&quot;.58667rem&quot;&gt;&lt;/Header&gt;
        &lt;!-- 查看返水详情弹框 --&gt;
        &lt;div v-show=&quot;isShowBackwaterMask&quot; class=&quot;copy-writer-details-mask&quot; @touchmove.self.prevent&gt;&lt;/div&gt;
        &lt;div v-show=&quot;isShowBackwaterMask&quot; class=&quot;copy-writer-details-box&quot;&gt;
            &lt;div class=&quot;details-title pk-1px-b&quot;&gt;
                &lt;span&gt;返水详情&lt;/span&gt;
                &lt;span @click=&quot;isShowBackwaterMask = false;&quot;&gt;&lt;i class=&quot;iconfont icon-sykszz-close&quot;&gt;&lt;/i&gt; &lt;/span&gt;
            &lt;/div&gt;
            &lt;div class=&quot;details-content&quot;&gt;
                &lt;dl&gt;
                    &lt;dt class=&quot;pk-1px-b&quot;&gt;
                            &lt;span&gt;游戏名称&lt;/span&gt;
                            &lt;span&gt;有效打码&lt;/span&gt;
                            &lt;span&gt;返水金额&lt;/span&gt;
                        &lt;/dt&gt;
                    &lt;div class=&quot;scorll-list&quot;&gt;
                        &lt;dd v-for=&quot;(item,index) in infoData.listList&quot; :key=&quot;index&quot; class=&quot;pk-1px-b&quot;&gt;
                            &lt;span&gt;{{item.platformname}}&lt;/span&gt;
                            &lt;span&gt;{{item.betall}}&lt;/span&gt;
                            &lt;span&gt;{{item.money}}&lt;/span&gt;
                        &lt;/dd&gt;
                    &lt;/div&gt;

                &lt;/dl&gt;
            &lt;/div&gt;
        &lt;/div&gt;


        &lt;div class=&quot;content&quot;&gt;
            &lt;div class=&quot;content-fixed&quot; v-show=&quot;infoData.betall&gt;0&quot;&gt;
                &lt;div class=&quot;backwater-top&quot;&gt;
                    &lt;ul&gt;
                        &lt;li&gt;
                            &lt;h2&gt;有效打码&lt;/h2&gt;
                            &lt;p v-show=&quot;!isShowBackWaterMoney&quot;&gt;****&lt;/p&gt;
                            &lt;p v-show=&quot;isShowBackWaterMoney&quot;&gt;{{infoData.betall}}&lt;/p&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;h2&gt;返水金额&lt;/h2&gt;
                            &lt;p v-show=&quot;!isShowBackWaterMoney&quot;&gt;****&lt;/p&gt;
                            &lt;p v-show=&quot;isShowBackWaterMoney&quot;&gt;{{infoData.allmoney}}&lt;/p&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;div class=&quot;backwater-top-btn&quot;&gt;
                        &lt;div v-show=&quot;isShowBackWaterMoney&quot; class=&quot;look&quot; @click=&quot;isShowBackwaterMask = true&quot;&gt;点击查看返水详情&lt;/div&gt;
                        &lt;div class=&quot;btn&quot;&gt;
                            &lt;button @click=&quot;getBackWaterInfo()&quot;&gt;查看返水额&lt;/button&gt;
                            &lt;button :disabled=&quot;infoData.status === 2 || !isShowBackWaterMoney&quot; @click=&quot;handleBackWater&quot;&gt;领取返水&lt;/button&gt;
                        &lt;/div&gt;

                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div v-show=&quot;list.length&gt;0&quot; class=&quot;backwater-list&quot;&gt;
                    &lt;div class=&quot;title&quot;&gt;自助返水历史&lt;/div&gt;
                    &lt;div class=&quot;total pk-1px-b&quot;&gt;
                        &lt;p&gt;当日已返水：&lt;span&gt;{{today}}&lt;/span&gt;&lt;/p&gt;
                        &lt;p&gt;本周返水额：&lt;span&gt;{{week}}&lt;/span&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;dl&gt;
                        &lt;dt class=&quot;pk-1px-b&quot;&gt;
                                &lt;span&gt;有效打码&lt;/span&gt;
                                &lt;span&gt;返水金额&lt;/span&gt;
                            &lt;/dt&gt;
                    &lt;/dl&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class=&quot;page-loadmore&quot;&gt;
                &lt;div class=&quot;page-loadmore-wrapper&quot; ref=&quot;wrapper&quot; :style=&quot;{ height: wrapperHeight + &#39;px&#39; }&quot;&gt;
                    &lt;pk-loadmore :top-method=&quot;loadTop&quot; :bottom-method=&quot;loadBottom&quot; :bottom-all-loaded=&quot;allLoaded&quot; @top-status-change=&quot;handleTopChange&quot; @bottom-status-change=&quot;handleBottomChange&quot; ref=&quot;loadmore&quot; :stop-translate=&quot;stopTranslate&quot;&gt;
                        &lt;ul&gt;
                            &lt;li v-for=&quot;(item,index) in list&quot; :key=&quot;index&quot; class=&quot;pk-1px-b&quot;&gt;
                                &lt;h2&gt;
                                    &lt;span&gt;{{item.betall}}&lt;/span&gt;
                                    &lt;span&gt;{{item.rebatewater}}&lt;/span&gt;
                                &lt;/h2&gt;
                                &lt;p&gt;
                                    &lt;span&gt;订单号：{{item.orderid}}&lt;/span&gt;
                                    &lt;span&gt;{{item.createtime | filterDate}}&lt;/span&gt;
                                &lt;/p&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                        &lt;div class=&quot;nodata&quot; v-show=&quot;hasData&quot;&gt;我是有底线的&lt;/div&gt;
                    &lt;/pk-loadmore&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div v-show=&quot;infoData.betall&lt;=0&quot; class=&quot;no-data&quot;&gt;
                &lt;div class=&quot;no-data-box&quot;&gt;
                    &lt;i class=&quot;iconfont icon-list-zanwusj&quot;&gt;&lt;/i&gt;
                    &lt;p&gt;您暂时还未获得返水哦~~&lt;/p&gt;
                    &lt;button&gt;去投注，获得返水！&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
    import pkLoadmore from &#39;../../../components/Loadmore&#39;
    import Header from &#39;../../../components/Header&#39;
    const backwater = proto.pb;
    export default {
        name: &#39;backwater&#39;,
        components: {
            Header,
            pkLoadmore
        },
        mounted() {
            this.getBackWaterInfo(1);
            this.getList();
        },
        watch: {
            isShowBackwaterMask(newVal, oldVal) {
                if (newVal) {
                    this.ModalHelper.open();
                } else {
                    this.ModalHelper.close();
                }
            }
        },
        data() {
            return {
                isShowBackwaterMask: false,

                allLoaded: false,
                topStatus: &#39;&#39;,
                bottomStatus: &#39;&#39;,
                wrapperHeight: 0,
                stopTranslate: parseInt(this.HTML_FONT_SIZE * 1.6),
                hasData: false,

                page: 1, //当前页数
                pageSize: 10, //每页请求的条数
                totalNum: 0, //总页数
                list: [],
                infoData: {},
                today: 0,
                week: 0,

                isShowBackWaterMoney: false,

            }
        },
        methods: {
            //获取返水列表
            getList(t) {
                let posts = {
                    page: this.page,
                    pageSize: this.pageSize,
                }
                let pageData = new backwater.PageParams();
                pageData.setPage(posts.page);
                pageData.setPagesize(posts.pageSize);

                let postData = new backwater.BackWaterReq();
                postData.setPageparams(pageData);
                let datas = postData.serializeBinary();

                this.ajax(&quot;PURSE_BACK_WATER_LIST&quot;, backwater.BackWaterResp, datas).then(res =&gt; {
                    this.today = res.today;
                    this.week = res.week;
                    this.totalNum = res.totalnum;
                    let result = res.listList;
                    if (this.page === 1) {
                        this.list = result;
                    } else {
                        this.list = this.list.concat(result);
                    }
                    if (t === 1) {
                        this.$toast({
                            message: &#39;刷新成功&#39;,
                            duration: 2000
                        })
                    }
                    this.$nextTick(() =&gt; {
                        this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
                    })
                }).catch(err =&gt;{})
            },
            //获取返水金额以及是否能返水
            getBackWaterInfo(t) {
                this.ajax(&quot;PURSE_BACK_WATER_INFO&quot;, backwater.BackWaterInfoResp).then(res =&gt; {
                    this.infoData = res;
                    this.isShowBackWaterMoney = !t;
                }).catch(err =&gt;{})
            },
            //领取返水
            handleBackWater() {
                this.ajax(&quot;PURSE_BACK_WATER_RECEIVE&quot;, null).then(res =&gt; {
                    this.$toast({
                        message: &#39;领取成功&#39;,
                        duration: 2000
                    });
                    this.getBackWaterInfo();
                }).catch(err =&gt;{})
            },
            //下拉刷新
            handleTopChange(status) {
                this.topStatus = status;
            },
            loadTop() {
                this.page = 1;
                this.hasData = false;
                setTimeout(() =&gt; {
                    this.getList(1);
                    this.$refs.loadmore.onTopLoaded();
                    this.allLoaded = false;
                }, 1500);
            },
            //mint-ui 上拉加载
            handleBottomChange(status) {
                this.bottomStatus = status;
            },
            loadBottom() {
                this.page += 1;
                this.hasData = false;
                setTimeout(() =&gt; {
                    this.getList();
                    this.$refs.loadmore.onBottomLoaded();
                    if (this.page * this.pageSize &gt;= this.totalNum) {
                        this.allLoaded = true; //所有数据加载完成
                        this.hasData = true;
                    }
                }, 1500);
            },
        }

    }
&lt;/script&gt;

&lt;style lang=&quot;less&quot; scoped&gt;
    @import url(&#39;../../../components/less/common.less&#39;);
    .no-data {
        padding: 0 .4rem/* 30/75 */;
       .no-data-box {
            margin-top: 2.13333rem/* 160/75 */;
            text-align: center;
            i{
                font-size: 2.53333rem /* 190/75 */;
                color: @color-8976cc;
                opacity: .6;
            }
            p {
                text-align: center;
                font-size: .42667rem/* 32/75 */
                ;
                color: @color-8976cc;
                margin-top: .26667rem/* 20/75 */
                ;
            }
            button {
                width: 100%;
                height: 1.06667rem/* 80/75 */
                ;
                line-height: 1.06667rem/* 80/75 */
                ;
                color: #fff;
                text-align: center;
                border: none;
                border-radius: .13333rem/* 10/75 */
                ;
                font-size: .37333rem/* 28/75 */
                ;
                background: @color-green;
                box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.12);
                margin-top: .53333rem/* 40/75 */
                ;
                &amp;:active {
                    background: @color-00cc8f;
                }
            }
            button.look {
                margin-top: .4rem/* 30/75 */
                ;
                background: #fff;
                border: 1px solid @color-green;
                color: @color-green;
            }
        }
    }

    .content {
        .content-fixed {
            position: fixed;
            width: 100%;
            top: 1.22667rem/* 92/75 */
            ;
            left: 0;
            right: 0;
        }
        .backwater-top {
            position: relative;
            ul {
                background: @color-252232;
                display: flex;
                justify-content: space-around;
                text-align: center;
                height: 3.41333rem/* 256/75 */
                ;
                padding-top: .74667rem/* 56/75 */
                ;
                li {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    h2 {
                        font-size: .4rem/* 30/75 */
                        ;
                        color: #fff;
                        font-weight: normal;
                    }
                    p {
                        margin-top: .44rem/* 33/75 */
                        ;
                        font-size: .48rem/* 36/75 */
                        ;
                        color: @color-green;
                    }
                }
            }
            .backwater-top-btn {
                position: absolute;
                bottom: -.53333rem/* 40/75 */
                ;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .look {
                    font-size: .37333rem/* 28/75 */
                    ;
                    color: @color-8976cc;
                    text-align: center;
                    margin-bottom: .4rem/* 30/75 */
                    ;
                }
                .btn {
                    display: flex;
                    justify-content: space-around;
                    button {
                        width: 3.2rem/* 240/75 */
                        ;
                        height: 1.06667rem/* 80/75 */
                        ;
                        ;
                        line-height: 1.06667rem/* 80/75 */
                        ;
                        font-size: .37333rem/* 28/75 */
                        ;
                        border-radius: .13333rem/* 10/75 */
                        ;
                        border: none;
                        background: @color-green;
                        color: @color-252232;
                        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.12);
                        &amp;:last-child {
                            color: #fff;
                        }
                        &amp;:disabled {
                            background: @color-add9cc;
                            box-shadow: none;
                            color: @color-c8c8cc;
                        }
                    }
                }
            }
        }
        .backwater-list {
            margin-top: .53333rem/* 40/75 */
            ;
            .title {
                line-height: 1.06667rem/* 80/75 */
                ;
                padding-left: .4rem/* 30/75 */
                ;
                font-size: .42667rem/* 32/75 */
                ;
                color: @color-323233;
            }
            .total {
                background: #fff;
                padding: 0 .4rem/* 30/75 */
                ;
                height: 1.06667rem/* 80/75 */
                ;
                display: flex;
                justify-content: space-between;
                align-items: center;
                p {
                    font-size: .37333rem/* 28/75 */
                    ;
                    color: @color-646466;
                    span {
                        color: @color-green;
                        font-weight: bold;
                    }
                }
            }
            dl {
                background: #fff;
                padding: 0 .4rem/* 30/75 */
                ;
                dt {
                    padding: .33333rem/* 25/75 */
                    0;
                    display: flex;
                    justify-content: space-between;
                    font-size: .42667rem/* 32/75 */
                    ;
                    color: @color-323233;
                    font-weight: bold;
                }
            }
        }
        .page-loadmore {
            position: fixed;
            top: 9.14667rem/* 686/75 */
            ;
            left: 0;
            right: 0;
            ul {
                background: #fff;
                padding: 0 .4rem/* 30/75 */
                ;
                li {
                    padding: .33333rem/* 25/75 */
                    0;
                    h2 {
                        display: flex;
                        justify-content: space-between;
                        color: @color-323233;
                        font-size: .37333rem/* 28/75 */
                        ;
                        font-weight: bold;
                    }
                    p {
                        display: flex;
                        justify-content: space-between;
                        color: @color-969699;
                        margin-top: .26667rem/* 20/75 */
                        ;
                        font-size: .32rem/* 24/75 */
                        ;
                    }
                }
            }
        }
    }
&lt;/style&gt;</code></pre>
<h3 id="19-抠出mint-ui-datePicker-源码"><a href="#19-抠出mint-ui-datePicker-源码" class="headerlink" title="19.抠出mint-ui datePicker 源码"></a>19.抠出mint-ui datePicker 源码</h3><pre><code class="html">&lt;template&gt;
    &lt;mt-popup v-model=&quot;visible&quot; :closeOnClickModal=&quot;closeOnClickModal&quot; position=&quot;bottom&quot; class=&quot;mint-datetime&quot;&gt;
        &lt;div class=&quot;popup-title pk-1px-b&quot;&gt;
            &lt;span @click=&quot;visible = false;$emit(&#39;cancel&#39;)&quot;&gt;{{cancelText}}&lt;/span&gt;
            &lt;span&gt;{{titleText}}&lt;/span&gt;
            &lt;span @click=&quot;confirm&quot;&gt;{{confirmText}}&lt;/span&gt;
        &lt;/div&gt;
        &lt;mt-picker :itemHeight=&quot;itemHeight&quot; :slots=&quot;dateSlots&quot; @change=&quot;onChange&quot; :visible-item-count=&quot;visibleItemCount&quot; class=&quot;mint-datetime-picker&quot; ref=&quot;picker&quot;&gt;
        &lt;/mt-picker&gt;
    &lt;/mt-popup&gt;
&lt;/template&gt;

&lt;style lang=&quot;less&quot;&gt;
    @import url(&quot;./less/common.less&quot;);
    .popup-title {
        height: 1.06667rem/* 80/75 */
        ;
        padding: 0 0.4rem/* 30/75 */
        ;
        font-size: 0.4rem/* 30/75 */
        ;
        color: @color-323233;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
            flex: 1;
            height: 1.06667rem/* 80/75 */
            ;
            line-height: 1.06667rem/* 80/75 */
            ;
        }
        span:first-child {
            color: @color-323233;
            text-align: left;
        }
        span:last-child {
            color: @color-green;
            text-align: right;
        }
    }
&lt;/style&gt;

&lt;script&gt;
    const FORMAT_MAP = {
        Y: &quot;year&quot;,
        M: &quot;month&quot;,
        D: &quot;date&quot;,
        H: &quot;hour&quot;,
        m: &quot;minute&quot;
    };

    export default {
        name: &quot;mt-datetime-picker&quot;,
        props: {
            titleText: {
                type: String,
                default: &quot;请选择时间&quot;
            },
            cancelText: {
                type: String,
                default: &quot;取消&quot;
            },
            confirmText: {
                type: String,
                default: &quot;确定&quot;
            },
            type: {
                type: String,
                default: &quot;datetime&quot;
            },
            startDate: {
                type: Date,
                default () {
                    return new Date(new Date().getFullYear() - 10, 0, 1);
                }
            },
            endDate: {
                type: Date,
                default () {
                    return new Date(new Date().getFullYear() + 10, 11, 31);
                }
            },
            startHour: {
                type: Number,
                default: 0
            },
            endHour: {
                type: Number,
                default: 23
            },
            yearFormat: {
                type: String,
                default: &quot;{value}&quot;
            },
            monthFormat: {
                type: String,
                default: &quot;{value}&quot;
            },
            dateFormat: {
                type: String,
                default: &quot;{value}&quot;
            },
            hourFormat: {
                type: String,
                default: &quot;{value}&quot;
            },
            minuteFormat: {
                type: String,
                default: &quot;{value}&quot;
            },
            visibleItemCount: {
                type: Number,
                default: 5
            },
            closeOnClickModal: {
                type: Boolean,
                default: true
            },
            value: null
        },

        data() {
            return {
                visible: false,
                startYear: null,
                endYear: null,
                startMonth: 1,
                endMonth: 12,
                startDay: 1,
                endDay: 31,
                currentValue: null,
                selfTriggered: false,
                dateSlots: [],
                shortMonthDates: [],
                longMonthDates: [],
                febDates: [],
                leapFebDates: [],
                itemHeight: 36
            };
        },
        methods: {
            open() {
                this.visible = true;
            },

            close() {
                this.visible = false;
            },

            isLeapYear(year) {
                return year % 400 === 0 || (year % 100 !== 0 &amp;&amp; year % 4 === 0);
            },

            isShortMonth(month) {
                return [4, 6, 9, 11].indexOf(month) &gt; -1;
            },

            getMonthEndDay(year, month) {
                if (this.isShortMonth(month)) {
                    return 30;
                } else if (month === 2) {
                    return this.isLeapYear(year) ? 29 : 28;
                } else {
                    return 31;
                }
            },

            getTrueValue(formattedValue) {
                if (!formattedValue) return;
                while (isNaN(parseInt(formattedValue, 10))) {
                    formattedValue = formattedValue.slice(1);
                }
                return parseInt(formattedValue, 10);
            },

            getValue(values) {
                let value;
                if (this.type === &quot;time&quot;) {
                    value = values
                        .map(value =&gt; (&quot;0&quot; + this.getTrueValue(value)).slice(-2))
                        .join(&quot;:&quot;);
                } else {
                    let year = this.getTrueValue(values[0]);
                    let month = this.getTrueValue(values[1]);
                    let date = this.getTrueValue(values[2]);
                    let maxDate = this.getMonthEndDay(year, month);
                    if (date &gt; maxDate) {
                        this.selfTriggered = true;
                        date = 1;
                    }
                    let hour =
                        this.typeStr.indexOf(&quot;H&quot;) &gt; -1 ?
                        this.getTrueValue(values[this.typeStr.indexOf(&quot;H&quot;)]) :
                        0;
                    let minute =
                        this.typeStr.indexOf(&quot;m&quot;) &gt; -1 ?
                        this.getTrueValue(values[this.typeStr.indexOf(&quot;m&quot;)]) :
                        0;
                    value = new Date(year, month - 1, date, hour, minute);
                }
                return value;
            },

            onChange(picker) {
                let values = picker.$children
                    .filter(child =&gt; child.currentValue !== undefined)
                    .map(child =&gt; child.currentValue);
                if (this.selfTriggered) {
                    this.selfTriggered = false;
                    return;
                }
                if (values.length !== 0) {
                    this.currentValue = this.getValue(values);
                    this.handleValueChange();
                }
            },

            fillValues(type, start, end) {
                let values = [];
                for (let i = start; i &lt;= end; i++) {
                    if (i &lt; 10) {
                        values.push(
                            this[`${FORMAT_MAP[type]}Format`].replace(
                                &quot;{value}&quot;,
                                (&quot;0&quot; + i).slice(-2)
                            )
                        );
                    } else {
                        values.push(this[`${FORMAT_MAP[type]}Format`].replace(&quot;{value}&quot;, i));
                    }
                }
                return values;
            },

            pushSlots(slots, type, start, end) {
                slots.push({
                    flex: 1,
                    values: this.fillValues(type, start, end)
                });
            },

            generateSlots() {
                let dateSlots = [];
                const INTERVAL_MAP = {
                    Y: this.rims.year,
                    M: this.rims.month,
                    D: this.rims.date,
                    H: this.rims.hour,
                    m: this.rims.min
                };
                let typesArr = this.typeStr.split(&quot;&quot;);
                typesArr.forEach(type =&gt; {
                    if (INTERVAL_MAP[type]) {
                        this.pushSlots.apply(
                            null, [dateSlots, type].concat(INTERVAL_MAP[type])
                        );
                    }
                });
                if (this.typeStr === &quot;Hm&quot;) {
                    dateSlots.splice(1, 0, {
                        divider: true,
                        content: &quot;:&quot;
                    });
                }
                this.dateSlots = dateSlots;
                this.handleExceededValue();
            },

            handleExceededValue() {
                let values = [];
                if (this.type === &quot;time&quot;) {
                    const currentValue = this.currentValue.split(&quot;:&quot;);
                    values = [
                        this.hourFormat.replace(&quot;{value}&quot;, currentValue[0]),
                        this.minuteFormat.replace(&quot;{value}&quot;, currentValue[1])
                    ];
                } else {
                    values = [
                        this.yearFormat.replace(&quot;{value}&quot;, this.getYear(this.currentValue)),
                        this.monthFormat.replace(
                            &quot;{value}&quot;,
                            (&quot;0&quot; + this.getMonth(this.currentValue)).slice(-2)
                        ),
                        this.dateFormat.replace(
                            &quot;{value}&quot;,
                            (&quot;0&quot; + this.getDate(this.currentValue)).slice(-2)
                        )
                    ];
                    if (this.type === &quot;datetime&quot;) {
                        values.push(
                            this.hourFormat.replace(
                                &quot;{value}&quot;,
                                (&quot;0&quot; + this.getHour(this.currentValue)).slice(-2)
                            ),
                            this.minuteFormat.replace(
                                &quot;{value}&quot;,
                                (&quot;0&quot; + this.getMinute(this.currentValue)).slice(-2)
                            )
                        );
                    }
                }
                this.dateSlots
                    .filter(child =&gt; child.values !== undefined)
                    .map(slot =&gt; slot.values)
                    .forEach((slotValues, index) =&gt; {
                        if (slotValues.indexOf(values[index]) === -1) {
                            values[index] = slotValues[0];
                        }
                    });
                this.$nextTick(() =&gt; {
                    this.setSlotsByValues(values);
                });
            },

            setSlotsByValues(values) {
                const setSlotValue = this.$refs.picker.setSlotValue;
                if (this.type === &quot;time&quot;) {
                    setSlotValue(0, values[0]);
                    setSlotValue(1, values[1]);
                }
                if (this.type !== &quot;time&quot;) {
                    setSlotValue(0, values[0]);
                    setSlotValue(1, values[1]);
                    setSlotValue(2, values[2]);
                    if (this.type === &quot;datetime&quot;) {
                        setSlotValue(3, values[3]);
                        setSlotValue(4, values[4]);
                    }
                }
                [].forEach.call(this.$refs.picker.$children, child =&gt;
                    child.doOnValueChange()
                );
            },

            rimDetect(result, rim) {
                let position = rim === &quot;start&quot; ? 0 : 1;
                let rimDate = rim === &quot;start&quot; ? this.startDate : this.endDate;
                if (this.getYear(this.currentValue) === rimDate.getFullYear()) {
                    result.month[position] = rimDate.getMonth() + 1;
                    if (this.getMonth(this.currentValue) === rimDate.getMonth() + 1) {
                        result.date[position] = rimDate.getDate();
                        if (this.getDate(this.currentValue) === rimDate.getDate()) {
                            result.hour[position] = rimDate.getHours();
                            if (this.getHour(this.currentValue) === rimDate.getHours()) {
                                result.min[position] = rimDate.getMinutes();
                            }
                        }
                    }
                }
            },

            isDateString(str) {
                return /\d{4}(\-|\/|.)\d{1,2}\1\d{1,2}/.test(str);
            },

            getYear(value) {
                return this.isDateString(value) ?
                    value.split(&quot; &quot;)[0].split(/-|\/|\./)[0] :
                    value.getFullYear();
            },

            getMonth(value) {
                return this.isDateString(value) ?
                    value.split(&quot; &quot;)[0].split(/-|\/|\./)[1] :
                    value.getMonth() + 1;
            },

            getDate(value) {
                return this.isDateString(value) ?
                    value.split(&quot; &quot;)[0].split(/-|\/|\./)[2] :
                    value.getDate();
            },

            getHour(value) {
                if (this.isDateString(value)) {
                    const str = value.split(&quot; &quot;)[1] || &quot;00:00:00&quot;;
                    return str.split(&quot;:&quot;)[0];
                }
                return value.getHours();
            },

            getMinute(value) {
                if (this.isDateString(value)) {
                    const str = value.split(&quot; &quot;)[1] || &quot;00:00:00&quot;;
                    return str.split(&quot;:&quot;)[1];
                }
                return value.getMinutes();
            },

            confirm() {
                this.visible = false;
                this.$emit(&quot;confirm&quot;, this.currentValue);
            },

            handleValueChange() {
                this.$emit(&quot;input&quot;, this.currentValue);
            }
        },

        computed: {
            rims() {
                if (!this.currentValue)
                    return {
                        year: [],
                        month: [],
                        date: [],
                        hour: [],
                        min: []
                    };
                let result;
                if (this.type === &quot;time&quot;) {
                    result = {
                        hour: [this.startHour, this.endHour],
                        min: [0, 59]
                    };
                    return result;
                }
                result = {
                    year: [this.startDate.getFullYear(), this.endDate.getFullYear()],
                    month: [1, 12],
                    date: [
                        1,
                        this.getMonthEndDay(
                            this.getYear(this.currentValue),
                            this.getMonth(this.currentValue)
                        )
                    ],
                    hour: [0, 23],
                    min: [0, 59]
                };
                this.rimDetect(result, &quot;start&quot;);
                this.rimDetect(result, &quot;end&quot;);
                return result;
            },

            typeStr() {
                if (this.type === &quot;time&quot;) {
                    return &quot;Hm&quot;;
                } else if (this.type === &quot;date&quot;) {
                    return &quot;YMD&quot;;
                } else {
                    return &quot;YMDHm&quot;;
                }
            }
        },

        watch: {
            value(val) {
                this.currentValue = val;
            },

            rims() {
                this.generateSlots();
            },

            visible(val) {
                this.$emit(&quot;visible-change&quot;, val);
            }
        },
        mounted() {
            this.itemHeight = parseInt(this.HTML_FONT_SIZE * 1.06667);//新增的
            this.currentValue = this.value;
            if (!this.value) {
                if (this.type.indexOf(&quot;date&quot;) &gt; -1) {
                    this.currentValue = this.startDate;
                } else {
                    this.currentValue = `${(&quot;0&quot; + this.startHour).slice(-2)}:00`;
                }
            }
            this.generateSlots();
        }
    };
&lt;/script&gt;</code></pre>

            </div>
            <hr>
            <div>
              <p>
                
                  <span>
                <i class="iconfont icon-inbox"></i>
                    
                      <a class="hover-with-bg" href="/categories/%E6%8A%80%E6%9C%AF/">技术</a>
                      &nbsp;
                    
                  </span>&nbsp;&nbsp;
                
                
                  <span>
                <i class="iconfont icon-tag"></i>
                    
                      <a class="hover-with-bg" href="/tags/Vue/">Vue</a>
                    
                  </span>
                
              </p>
              
                <p class="note note-warning">本博客所有文章除特别声明外，均采用 <a href="https://zh.wikipedia.org/wiki/Wikipedia:CC_BY-SA_3.0%E5%8D%8F%E8%AE%AE%E6%96%87%E6%9C%AC" target="_blank" rel="nofollow noopener noopener">CC BY-SA 3.0协议</a> 。转载请注明出处！</p>
              
            </div>

            
              <!-- Comments -->
              <div class="comments" id="comments">
                
                
  <div id="vcomments"></div>
  <script defer src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script defer src="//unpkg.com/valine/dist/Valine.min.js"></script>

  <script type="text/javascript">
    var notify = 'false' === 'true';
    var verify = 'false' === 'true';
    var oldLoad = window.onload;
    window.onload = function () {
      new Valine({
        el: '#vcomments',
        notify: notify,
        verify: verify,
        app_id: "RVi2nheifsyLgdNUtOODWrEk-gzGzoHsz",
        app_key: "IcQeTY6Y778SNjPL5dwy9JOs",
        placeholder: "说点什么",
        avatar: "/retro",
        meta: ['nick', 'mail', 'link'],
        pageSize: "10",
      });
      oldLoad && oldLoad();
    };
  </script>
  <noscript>Please enable JavaScript to view the <a href="https://valine.js.org" target="_blank" rel="nofollow noopener noopener">comments
      powered by Valine.</a></noscript>


              </div>
            
          </div>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc-start"></div>
<div id="toc">
  <p class="h5"><i class="far fa-list-alt"></i>&nbsp;目录</p>
  <div id="tocbot"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    
  </main>

  
    <a class="z-depth-1" id="scroll-top-button" href="#" role="button">
      <i class="fa fa-chevron-up scroll-top-arrow" aria-hidden="true"></i>
    </a>
  

  
    <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
  

  

  

  <footer class="mt-5">
  <div class="text-center py-3">
    <div>
      <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><b>Hexo</b></a>
      <i class="iconfont icon-love"></i>
      <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"> <b>Fluid</b></a>
    </div>
    

    

    
  </div>
</footer>

<!-- SCRIPTS -->
<script  src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" ></script>
<script  src="https://cdn.staticfile.org/popper.js/1.16.1/umd/popper.min.js" ></script>
<script  src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script  src="https://cdn.staticfile.org/mdbootstrap/4.13.0/js/mdb.min.js" ></script>
<script  src="/js/main.js" ></script>


  <script  src="/js/lazyload.js" ></script>



  
  <script  src="https://cdn.staticfile.org/tocbot/4.10.0/tocbot.min.js" ></script>
  <script>
    $(document).ready(function () {
      var navHeight = $('#navbar').height();
      var post = $('#post');
      var toc = $('#toc');
      var tocLimMax = post.offset().top + post.height() - navHeight;

      $(window).scroll(function () {
        var tocLimMin = $('#toc-start').offset().top - navHeight;
        var scroH = document.body.scrollTop + document.documentElement.scrollTop;

        if (tocLimMin <= scroH && scroH <= tocLimMax) {
          toc.css({
            'display': 'block',
            'position': 'fixed',
            'top': navHeight,
          });
        } else if (scroH <= tocLimMin) {
          toc.css({
            'position': '',
            'top': '',
          });
        } else if (scroH > tocLimMax) {
          toc.css('display', 'none');
        }
      });
      tocbot.init({
        tocSelector: '#tocbot',
        contentSelector: '.post-content',
        headingSelector: 'h1,h2,h3,h4,h5,h6',
        linkClass: 'tocbot-link',
        activeLinkClass: 'tocbot-active-link',
        listClass: 'tocbot-list',
        isCollapsedClass: 'tocbot-is-collapsed',
        collapsibleClass: 'tocbot-is-collapsible',
        scrollSmooth: true,
      });
      if ($('.toc-list-item').length > 0) {
        $('#toc > p').css('visibility', 'visible');
      }
      var offset = $('#board-ctn').css('margin-right')
      $('#toc-ctn').css({
        'right': offset
      })
    });
  </script>










<!-- Plugins -->



  <script  src="https://cdn.staticfile.org/prettify/188.0.0/prettify.min.js" ></script>
  <script>
    $(document).ready(function () {
      $('pre').addClass('prettyprint  linenums');
      prettyPrint();
    })
  </script>



  <script  src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js" ></script>
  <script>
    var typed = new Typed('#subtitle', {
      strings: [
        '  ',
        "Vue 常用集锦&nbsp;",
      ],
      cursorChar: "_",
      typeSpeed: 70,
      loop: false,
    });
    typed.stop();
    $(document).ready(function () {
      $(".typed-cursor").addClass("h2");
      typed.start();
    });
  </script>



  <script  src="https://cdn.staticfile.org/anchor-js/4.2.2/anchor.min.js" ></script>
  <script>
    anchors.options = {
      placement: "right",
      visible: "hover",
      
    };
    var el = "h1,h2,h3,h4,h5,h6".split(",");
    var res = [];
    for (item of el) {
      res.push(".markdown-body > " + item)
    }
    anchors.add(res.join(", "))
  </script>



  <script  src="/js/local-search.js" ></script>
  <script>
    var path = "/local-search.xml";
    var inputArea = document.querySelector("#local-search-input");
    inputArea.onclick = function () {
      getSearchFile(path);
      this.onclick = null
    }
  </script>



  <script defer src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js" ></script>
  <script>
    $("#post img:not(.no-zoom img, img[no-zoom])").each(
      function () {
        var element = document.createElement("a");
        $(element).attr("data-fancybox", "images");
        $(element).attr("href", $(this).attr("src"));
        $(this).wrap(element);
      }
    );
  </script>





  
  
    <script>
      !function (e, t, a) {
        function r() {
          for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
          requestAnimationFrame(r)
        }

        function n() {
          var t = "function" == typeof e.onclick && e.onclick;
          e.onclick = function (e) {
            t && t(), o(e)
          }
        }

        function o(e) {
          var a = t.createElement("div");
          a.className = "heart", s.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: c()
          }), t.body.appendChild(a)
        }

        function i(e) {
          var a = t.createElement("style");
          a.type = "text/css";
          try {
            a.appendChild(t.createTextNode(e))
          } catch (t) {
            a.styleSheet.cssText = e
          }
          t.getElementsByTagName("head")[0].appendChild(a)
        }

        function c() {
          return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
        }

        var s = [];
        e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
          setTimeout(e, 1e3 / 60)
        }, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()
      }(window, document);
    </script>
  








</body>
</html>
